<template>
	<div class="box" ref="wrapper">
		<div class="list">
			<div class="area">
				<div class="titile border-topbottom">当前城市</div>
				<div class="area-list">
					<div class="button-wrapper">
						<div class="button">{{this.$store.state.city}}</div>
					</div>
				</div>
			</div>
			<div class="area">
				<div class="titile border-topbottom">热门城市</div>
				<div class="area-list">
					<div class="button-wrapper"  
            v-for="item of hotCities" 
            :key="item.id"
            @click="changeIndex(item.name)">
						<div class="button">{{item.name}}</div>
					</div>
				</div>
			</div>
			<div class="area" v-for="(value, key) of cities" :key="value[0].id">
				<div class="titile border-topbottom" :ref='key'>{{key}}</div>
				<div class="list-item">
					<div class="item border-topbottom" v-for="place of value" :key="place.id">{{place.name}}</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import BScroll from 'better-scroll'
// let scroll = new BScroll('.wrapper')
export default {
	name: 'cityList',
 
 props: {
    hotCities: Array,
    cities: Object,
    clickText: String
  },

  methods: {
    changeIndex(name) {
      this.$store.commit('changCity', name)
      this.$router.push('/')
    }
  },
  
  mounted () {
		this.$nextTick(() => {// 用于无滑动条滑动效果
      let bscrollDom = this.$refs.wrapper;
      this.aBScroll = new BScroll(bscrollDom,{})
    })  
  },
  
  watch: {
    clickText () {
      if (this.clickText) {
        let ele = this.$refs[this.clickText][0]
        this.aBScroll.scrollToElement(ele,500)
      }
    },  
  }
}
</script>
<style scoped>
.border-topbottom::after {
	border-color: #ccc;
}
.border-topbottom::before {
	border-color: #ccc;
}
.border-bottom::before {
	 border-color: #ccc;
}
.box {
	overflow: hidden;
  position: absolute;
  top: 1.58rem;
  left: 0;
  right: 0;
  bottom: 0;
}
.titile {/*每一块区域的标题*/
	padding: .1rem;
  padding-left: .2rem;
	background-color: #eee;
}
.area-list {/*罗列地区名的区域*/
	padding: .1rem .6rem .1rem .1rem;
	overflow: hidden;/*解决高度塌陷问题*/
}
.button-wrapper {/*每一个地名区块*/
	float: left;
	width: 33.33%
}
.button {/*地名方块样式*/
	margin: .1rem;
  padding: .1rem 0;
  text-align: center;
  border: .02rem solid #ccc;
  border-radius: .06rem;
}
.item {/*底部列表*/
	line-height: .76rem;
  padding-left: .2rem;
}
</style>
